<template>
	<view class="content">
		<view class="share_choice_out" v-if="share">
			<view class="share_choice">
				<view class="shoice_tittle">选择模板<span @tap="doShare()">返回</span></view>
				<button class="choice_item" @tap="goMobanOne()">模板1</button>
				<button class="choice_item" @tap="goMobanTwo()">模板2</button>
			</view>
		</view>

		<view class="bg_img" :style="{'background-image':'url('+info.backgroundimg+')'}"></view>
		<view class="meeting_area">
			<view class="meeting_logo">
				<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/log.png" mode=""></image>
			</view>
			<view class="meeting_tittle">{{info.meetname}}</view>
			<view class="meeting_info_area">
				<view class="meeting_boxs">
					<view class="info_tittle">展会人数</view>
					<view class="info_num">{{info.expovolume}}<span>人</span></view>
				</view>
				<view class="meeting_boxs">
					<view class="info_tittle">分享量</view>
					<view class="info_num">{{info.sharevolume}}<span>人/次</span></view>
				</view>
				<view class="meeting_boxs">
					<view class="info_tittle">浏览量</view>
					<view class="info_num">{{info.browsevolume}}<span>人/次</span></view>
				</view>
			</view>
			<button class="buttoms join" @tap="goNext()">立即报名</button>
			<button class="buttoms share" @tap="doShare()">分享</button>
		</view>

	</view>
</template>

<script>
	import config from '@/common/config.js';
	export default {
		components: {},
		data() {
			return {
				info: [],
				share: false
			}
		},
		onLoad() {
			this.selectInfo();
			this.addVolume();
		},
		onShow() {
			this.selectInfo();
		},
		methods: {
			goNext() {
				uni.navigateTo({
					url: '../baoming/baoming-second'
				});
			},
			goMobanOne() {
				uni.navigateTo({
					url: '../baoming/moban-one'
				});
			},
			goMobanTwo() {
				uni.navigateTo({
					url: '../baoming/moban-two'
				});
			},
			doShare() {
				this.share = !this.share
			},
			selectInfo() {
				var that = this;
				uni.request({
					url: config.ujqApi + '/api/back/selectExhibitionById',
					data: {
						exhibitionId: "1"
					},
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						that.info = res.data.data
					}
				});
			},
			addVolume() {
				uni.request({
					url: config.ujqApi + '/api/back/addExhibitionVolume',
					data: {
						exhibitionId: "1"
					},
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {

					}
				});
			},
		}
	}
</script>

<style>
	page {
		background: rgba(255, 255, 255, 1);
		height: 100%;
		width: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
	}

	.bg_img {
		width: 100%;
		height: 240px;
		background-size: cover;
	}

	.meeting_area {
		width: 100%;
		height: 400px;
		background-color: #FFF;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		margin-top: -20px;
		margin-bottom: -20px;
	}

	.meeting_logo {
		width: 100%;
		height: 50px;
		padding-top: 35px;
		text-align: center;
	}

	.meeting_logo image {
		width: 50px;
		height: 50px;
		border-radius: 10px;
	}

	.meeting_tittle {
		text-align: center;
		width: 100%;
		height: 40px;
		line-height: 40px;
		font-size: 15px;
		font-weight: 500;
		font-family: PingFangSC-Regular, PingFangSC;
		color: rgba(17, 17, 17, 1);
	}

	.meeting_info_area {
		margin: 20px;
		height: 100px;
		background-color: #FFFFE0;
		border-radius: 5px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.meeting_boxs {
		width: 33.3%;
		height: 100%;
	}

	.info_tittle {
		width: 100%;
		height: 50px;
		text-align: center;
		font-size: 11px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(17, 17, 17, 1);
		line-height: 76px;
	}

	.info_num {
		width: 100%;
		height: 50px;
		text-align: center;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(17, 17, 17, 1);
		line-height: 20px;
	}

	.info_num span {
		font-size: 8px;
	}

	.buttoms {
		height: 40px;
		margin: 10px 20px;
		text-align: center;
		line-height: 40px;
		font-size: 15px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 400;
		border-radius: 3px;
		border: none;
	}

	.join {
		background-color: #EE5C42;
		color: rgba(255, 255, 255, 1);
	}

	.share {
		background-color: #FDF5E6;
		color: #EE5C42;
	}

	.share_choice_out {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgb(17, 17, 17, 0.8);
		z-index: 15;
	}

	.share_choice {
		width: 100%;
		height: 35%;
		position: fixed;
		bottom: 0;
		background-color: #FFF;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		z-index: 100;
	}

	.shoice_tittle {
		margin: 15px;
		font-size: 18px;
		font-color: #FFF;
		font-weight: 400;
		direction: flex;
	}

	.shoice_tittle span {
		float: right;
	}

	.choice_item {
		margin: 15px;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #CCCCCC;
		text-align: left;
		border: none;
	}
</style>
